<template>
  邮箱<input type="text" v-model="email">
  <br>
  公司<input type="text" v-model="company" ref="company">
  <br>
  公司邮箱:{{emailAddress}}
  <br>
  用户姓名:
  <input type="text" v-model="userInfo.name"/>
  <br>
  用户年龄:
  <input type="text" v-model="userInfo.age"/>
<nb-button text="登录"></nb-button>
<nb-button text="注册"></nb-button>
<nb-box>九万点赞</nb-box>
<nb-box>up</nb-box>
</template>
<script>
import NbBox from './components/NbBox.vue';
import NbButton from './components/NbButton.vue'
  export default {
    name: 'App',
    components: {
      NbButton,
      NbBox,
    },

    data() {
      return {
        email: '',
        company: '',
        userInfo: {
          name: '',
          age: '',
        }
      }
    },
    mounted() {
      this.$refs.company.focus();
    },
    computed: {
      emailAddress() {
        return this.email + '@' + this.company + '.com'
      }
    },
    watch: {
      email(NewValue, OldValue) {
        if (NewValue.length > 7) {
          this.email = OldValue
        }
        console.log(NewValue, OldValue)
      },
      'userInfo.name': {
        handler(newValue, oldValue) {
          console.log('userInfo里面的值发生变化了',newValue, oldValue);
        },
        once: true
      }
    }
  }
</script>
